<!--
 * @Author: your name
 * @Date: 2022-01-05 12:17:06
 * @LastEditTime: 2022-01-10 21:50:26
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \project_am-master\am-dashboard\src\pages\m3\components\Left1.vue
-->

<template>
  <!--1. 容器 -->
  <div ref="left1_container" id="container" style="height: 95%"></div>
</template>
<script>
// 引入折线图构造函数
import { Line } from "@antv/g2plot";
import { get } from "../../../utils/request";
import moment from "moment";
export default {
  data() {
    return {
      dataArr: [
        {
          date:'1980',
          value:150000
        },
        {
          date:'1990',
          value:200000
        },
        {
          date:'2000',
          value:250000
        },
        {
          date:'2010',
          value:280000
        },
        {
          date:'2020',
          value:300000
        }
      ],
      devices: [],
      device_id: 1,
    };
  },
  created() {},
  mounted() {
    // this.initData();
    this.initChart();
  },
  methods: {
    // initData() {
    //   get("/dashboard/pageQueryTodayData", {
    //     page: 1,
    //     pageSize: 5,
    //     device_id: this.device_id,
    //   }).then((res) => {
    //     console.log(res);
    //     res.data.list.forEach((item) => {
    //       item.dateTime = moment(item.insert_time).format("hh:mm");
    //     });
    //     this.dataArr = res.data.list;
    //     this.initChart();
    //   });
    // },
    initChart() {
      // 创建一个折线图对象
      const line = new Line(this.$refs.left1_container, {
        data: this.dataArr,
        xField: "date",
        yField: "value",
      });
      // 渲染图像
      line.render();
    },
  },
};
</script>

<style scoped>
</style>
>>>>>>> 9412502b99b728a658dcbd89e9bfe2e3bf5302b5
